﻿
@{
    ViewBag.Title = "Post";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}
@section head {
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="~/Content/css/posting.css">
    <!--[if IE]>
        <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8" charset="utf-8"></script>
    <!--start 输入框-->
    <style type="text/css">
        #msgBox {
            width: 500px;
            background: #fff;
            border-radius: 5px;
            margin: 10px auto;
            padding-top: 10px;
            font: 12px/1.5 \5b8b\4f53;
        }

            #msgBox form h2 {
                font-weight: 400;
                font: 400 18px/1.5 \5fae\8f6f\96c5\9ed1;
            }

            #msgBox form {
                /*background: url(img/boxBG.jpg) repeat-x 0 bottom;*/
                padding: 0 20px 15px;
            }

        #userName, #conBox {
            color: #777;
            border: 1px solid #d0d0d0;
            border-radius: 6px;
            /*background: #fff url(img/inputBG.png) repeat-x;*/
            padding: 3px 5px;
            font: 14px/1.5 arial;
        }

            #userName.active, #conBox.active {
                border: 1px solid #7abb2c;
            }

        #userName {
            height: 20px;
        }

        #conBox {
            width: 448px;
            resize: none;
            height: 65px;
            overflow: auto;
        }

        #msgBox form div {
            position: relative;
            color: #999;
            margin-top: 10px;
        }

        #msgBox img {
            border-radius: 3px;
        }

        #face {
            position: absolute;
            top: 0;
            left: 172px;
        }

            #face img {
                width: 30px;
                height: 30px;
                cursor: pointer;
                margin-right: 6px;
                opacity: 0.5;
                filter: alpha(opacity=50);
            }

                #face img.hover, #face img.current {
                    width: 28px;
                    height: 28px;
                    border: 1px solid #f60;
                    opacity: 1;
                    filter: alpha(opacity=100);
                }

        #sendBtn {
            border: 0;
            width: 112px;
            height: 30px;
            cursor: pointer;
            margin-left: 10px;
            background: url(/Content/img/btnShare.png) no-repeat;
        }

            #sendBtn.hover {
                background-position: 0 -30px;
            }

        #msgBox form .maxNum {
            font: 26px/30px Georgia, Tahoma, Arial;
            padding: 0 5px;
        }

        #msgBox .list {
            padding: 10px;
        }

            #msgBox .list h3 {
                position: relative;
                height: 33px;
                font-size: 14px;
                font-weight: 400;
                background: #e3eaec;
                border: 1px solid #dee4e7;
            }

                #msgBox .list h3 span {
                    position: absolute;
                    left: 6px;
                    top: 6px;
                    background: #fff;
                    line-height: 28px;
                    display: inline-block;
                    padding: 0 15px;
                }

            #msgBox .list ul {
                overflow: hidden;
                zoom: 1;
            }

                #msgBox .list ul li {
                    float: left;
                    clear: both;
                    width: 100%;
                    border-bottom: 1px dashed #d8d8d8;
                    padding: 10px 0;
                    background: #fff;
                    overflow: hidden;
                }

                    #msgBox .list ul li.hover {
                        background: #f5f5f5;
                    }

            #msgBox .list .userPic {
                float: left;
                width: 50px;
                height: 50px;
                display: inline;
                margin-left: 10px;
                border: 1px solid #ccc;
                border-radius: 3px;
            }

            #msgBox .list .content {
                float: left;
                width: 400px;
                font-size: 14px;
                margin-left: 10px;
                font-family: arial;
                word-wrap: break-word;
            }

            #msgBox .list .userName {
                display: inline;
                padding-right: 5px;
            }

                #msgBox .list .userName a {
                    color: #2b4a78;
                }

            #msgBox .list .msgInfo {
                display: inline;
                word-wrap: break-word;
            }

            #msgBox .list .times {
                color: #889db6;
                font: 12px/18px arial;
                margin-top: 5px;
                overflow: hidden;
                zoom: 1;
            }

                #msgBox .list .times span {
                    float: left;
                }

                #msgBox .list .times a {
                    float: right;
                    color: #889db6;
                    display: none;
                }

        .tr {
            overflow: hidden;
            zoom: 1;
        }

            .tr p {
                float: right;
                line-height: 30px;
            }

            .tr * {
                float: left;
            }
    </style>
    <!--end 输入框-->
}

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <!--<h1>Chobi <small>The Image Processing Library</small></h1>
            <hr>-->
            <span class="btn btn-info" onClick="document.getElementById('image-chooser').click();">Upload Image</span>
            <button class="btn btn-info" onClick="downloadImage()">Download Image</button>
            <div class="alert alert-warning" id="error" style="display:none;">
                <strong>Error!</strong> You didn't upload any image yet.
            </div>
            <div class="btn-group" id="filters" style="display:none;">
                <h3>Filters:</h3>
                <button class="btn btn-success" onClick="loadImage(document.getElementById('image-chooser'))">Reset</button>
                <button class="btn btn-success" onClick="filter(0)">Black and White</button>
                <button class="btn btn-success" onClick="filter(10)">Black and White 2</button>
                <button class="btn btn-success" onClick="filter(1)">Sepia</button>
                <button class="btn btn-success" onClick="filter(2)">Negative</button>
                <button class="btn btn-success" onClick="filter(3)">Vintage</button>
                <button class="btn btn-success" onClick="filter(4)">Cross Process</button>
                <button class="btn btn-success" onClick="filter(9)">Noise</button>
                <button class="btn btn-success" onClick="filter(5)">Brightness +1</button>
                <button class="btn btn-success" onClick="filter(6)">Brightness -1</button>
                <button class="btn btn-success" onClick="filter(7)">Contrast +1</button>
                <button class="btn btn-success" onClick="filter(8)">Contrast -1</button>
                <button class="btn btn-success" onClick="filter(11)">Crayon</button>
                <button class="btn btn-success" onClick="filter(12)">Cartoonify</button>
                <button class="btn btn-success" onClick="filter(13)">Vignette</button>
                <button class="btn btn-warning" onClick="myFilter()">Custom Filter</button>
            </div>
        </div>
        <div class="col-sm-12">
            <input type="file" id="image-chooser" style="display:none" onChange="loadImage(this)">
            <!--上传图片（滤镜）-->
            <canvas id="canvas" width="600" height="300" class="well"></canvas>
        </div>
        <div class="col-sm-12">
            <div id="msgBox">
                <form>
                    <h2>Right your thoughts</h2>
                    <div><textarea id="conBox" class="f-text"></textarea></div>
                    <div class="tr">
                        <p>
                            <span class="countTxt">There are</span><strong class="maxNum">100</strong><span>words left</span>
                            <input id="sendBtn" type="button" value="" title="hot key Ctrl+Enter" />
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@section script {
    <script type="text/javascript" src="~/Content/js/Chobi.min.js"></script>
    <script type="text/javascript">
        //custom filter
        function myFilter() {
            var height = imgObj.imageData.height;
            //orange
            for (var i = 0; i < imgObj.imageData.width; i++) {
                for (var j = 0; j < Math.floor(height / 3); j++) {
                    var pixel = imgObj.getColorAt(i, j);
                    pixel.red = (255 + pixel.red) / 2;
                    pixel.green = (165 + pixel.green) / 2;
                    pixel.blue /= 2;
                    imgObj.setColorAt(i, j, pixel);
                }
            }
            //white
            for (var i = 0; i < imgObj.imageData.width; i++) {
                for (var j = Math.floor(height / 3); j < Math.floor(2 * (height / 3)); j++) {
                    var pixel = imgObj.getColorAt(i, j);
                    pixel.red = (255 + pixel.red) / 2;
                    pixel.green = (255 + pixel.green) / 2;
                    pixel.blue = (255 + pixel.blue) / 2;
                    imgObj.setColorAt(i, j, pixel);
                }
            }
            //green
            for (var i = 0; i < imgObj.imageData.width; i++) {
                for (var j = Math.floor(2 * (height / 3)); j < Math.floor(height); j++) {
                    var pixel = imgObj.getColorAt(i, j);
                    pixel.red = (0 + pixel.red) / 2;
                    pixel.green = (255 + pixel.green) / 2;
                    pixel.blue = (0 + pixel.blue) / 2;
                    imgObj.setColorAt(i, j, pixel);
                }
            }
            imgObj.loadImageToCanvas();
        }

        var imgObj = null; //global Chobi object
        function loadImage(elem) {
            //you should probably check if file is image or not before passing it
            imgObj = new Chobi(elem);
            imgObj.ready(function () {
                this.canvas = document.getElementById("canvas");
                this.loadImageToCanvas();

                //show filters to users
                document.getElementById("filters").style.display = "block";
            });
        }

        function downloadImage() {
            if (imgObj == null) {
                document.getElementById("error").style.display = "block";
                setTimeout(function () {
                    document.getElementById("error").style.display = "none";
                }, 4000);
                return;
            }
            imgObj.download('demo-image');
        }


        //0 -> Black and white
        //10 -> Black and white2
        //1 -> sepia
        //2 -> negative
        //3 -> vintage
        //4 -> crossprocess
        //5 -> Brightness increase
        //6 -> Brightness decrease
        //7 -> Contrast increase
        //8 -> Contrast decrease
        //9 -> Noise Effect
        //11 -> Crayon effect
        //12 -> Cartoonify
        //13 -> Vignette
        //filter chaining is also possible, like imgObj.brightness(-5).sepia().negative();
        function filter(id) {
            if (imgObj == null) {
                alert("Choose an image first!");
                return;
            }
            if (id == 0) {
                imgObj.blackAndWhite();
            }
            else if (id == 1) {
                imgObj.sepia();
            }
            else if (id == 2) {
                imgObj.negative();
            }
            else if (id == 3) {
                imgObj.vintage();
            }
            else if (id == 4) {
                imgObj.crossProcess();
            }
            else if (id == 5) {
                imgObj.brightness(1);
            }
            else if (id == 6) {
                imgObj.brightness(-1);
            }
            else if (id == 7) {
                imgObj.contrast(1);
            }
            else if (id == 8) {
                imgObj.contrast(-1);
            }
            else if (id == 9) {
                imgObj.noise();
            }
            else if (id == 10) {
                imgObj.blackAndWhite2();
            }
            else if (id == 11) {
                imgObj.crayon();
            }
            else if (id == 12) {
                imgObj.cartoon();
            }
            else if (id == 13) {
                imgObj.vignette();
            }


            imgObj.loadImageToCanvas();
        }

    </script>

    <!--发帖子-->
    <script type="text/javascript">

        /*-------------------------- +
          获取id, class, tagName
         +-------------------------- */
        var get = {
            byId: function (id) {
                return typeof id === "string" ? document.getElementById(id) : id
            },
            byClass: function (sClass, oParent) {
                var aClass = [];
                var reClass = new RegExp("(^| )" + sClass + "( |$)");
                var aElem = this.byTagName("*", oParent);
                for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
                return aClass
            },
            byTagName: function (elem, obj) {
                return (obj || document).getElementsByTagName(elem)
            }
        };
        /*-------------------------- +
          事件绑定, 删除
         +-------------------------- */
        var EventUtil = {
            addHandler: function (oElement, sEvent, fnHandler) {
                oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : (oElement["_" + sEvent + fnHandler] = fnHandler, oElement[sEvent + fnHandler] = function () { oElement["_" + sEvent + fnHandler]() }, oElement.attachEvent("on" + sEvent, oElement[sEvent + fnHandler]))
            },
            removeHandler: function (oElement, sEvent, fnHandler) {
                oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, oElement[sEvent + fnHandler])
            },
            addLoadHandler: function (fnHandler) {
                this.addHandler(window, "load", fnHandler)
            }
        };
        /*-------------------------- +
          设置css样式
          读取css样式
         +-------------------------- */
        function css(obj, attr, value) {
            switch (arguments.length) {
                case 2:
                    if (typeof arguments[1] == "object") {
                        for (var i in attr) i == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + attr[i] + ")", obj.style[i] = attr[i] / 100) : obj.style[i] = attr[i];
                    }
                    else {
                        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
                    }
                    break;
                case 3:
                    attr == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + value + ")", obj.style[attr] = value / 100) : obj.style[attr] = value;
                    break;
            }
        };

        EventUtil.addLoadHandler(function () {
            var oMsgBox = get.byId("msgBox");
            var oUserName = get.byId("userName");
            var oConBox = get.byId("conBox");
            var oSendBtn = get.byId("sendBtn");
            var oMaxNum = get.byClass("maxNum")[0];
            var oCountTxt = get.byClass("countTxt")[0];
            var oList = get.byClass("list")[0];
            var oUl = get.byTagName("ul", oList)[0];
            var aLi = get.byTagName("li", oList);
            var aFtxt = get.byClass("f-text", oMsgBox);
            var aImg = get.byTagName("img", get.byId("face"));
            var bSend = false;
            var timer = null;
            var oTmp = "";
            var i = 0;
            var maxNum = 100;

            //禁止表单提交
            EventUtil.addHandler(get.byTagName("form", oMsgBox)[0], "submit", function () { return false });

            //为广播按钮绑定发送事件
            EventUtil.addHandler(oSendBtn, "click", fnSend);

            //为Ctrl+Enter快捷键绑定发送事件
            EventUtil.addHandler(document, "keyup", function (event) {
                var event = event || window.event;
                event.ctrlKey && event.keyCode == 13 && fnSend()
            });

            //发送广播函数
            function fnSend() {
                var reg = /^\s*$/g;
                if (reg.test(oConBox.value)) {
                    alert("\u968f\u4fbf\u8bf4\u70b9\u4ec0\u4e48\u5427\uff01");
                    oConBox.focus()
                }
                else if (!bSend) {
                    alert("\u4f60\u8f93\u5165\u7684\u5185\u5bb9\u5df2\u8d85\u51fa\u9650\u5236\uff0c\u8bf7\u68c0\u67e5\uff01");
                    oConBox.focus()
                }
                else {
                    var i = returnCitySN;
                    var userIP = i['cip'];
                    var userCity = i['cname'];
                    if (imgObj == null) {
                        alert("You didn't upload any image yet.");
                        document.getElementById("error").style.display = "block";
                        setTimeout(function () {
                            document.getElementById("error").style.display = "none";
                        }, 4000);
                        return;
                    }
                    $("#sendBtn").attr('disabled', 'true');
                    var mycanvas = document.getElementById("canvas");
                    var base64Data = mycanvas.toDataURL("image/jpeg", 1.0);
                    $.ajax({
                        url: "/Post/Posting", dataType: "json",
                        type: "post", data: { content: oConBox.value, base64Data: base64Data, IP: userIP, City: userCity },
                        success: function (res) {
                            if (res.Status == "OK") {
                                //alert("OK");
                                location.href = "/Home/Index";
                            } else {
                                alert(res.ErrorMsg);
                                $("#sendBtn").removeAttr("disabled");
                            }
                        }, error: function () {
                            alert("Network error");
                            $("#sendBtn").removeAttr("disabled");
                        }
                    });
                }
            };

            function dataURItoBlob(base64Data) {
                var byteString;
                if (base64Data.split(',')[0].indexOf('base64') >= 0)
                    byteString = atob(base64Data.split(',')[1]);
                else
                    byteString = unescape(base64Data.split(',')[1]);
                var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
                var ia = new Uint8Array(byteString.length);
                for (var i = 0; i < byteString.length; i++) {
                    ia[i] = byteString.charCodeAt(i);
                }
                return new Blob([ia], { type: mimeString });
            };
            //事件绑定, 判断字符输入
            EventUtil.addHandler(oConBox, "keyup", confine);
            EventUtil.addHandler(oConBox, "focus", confine);
            EventUtil.addHandler(oConBox, "change", confine);

            //输入字符限制
            function confine() {
                var iLen = 0;
                for (i = 0; i < oConBox.value.length; i++) iLen += /[^\x00-\xff]/g.test(oConBox.value.charAt(i)) ? 1 : 0.5;
                oMaxNum.innerHTML = Math.abs(maxNum - Math.floor(iLen));
                maxNum - Math.floor(iLen) >= 0 ? (css(oMaxNum, "color", ""), oCountTxt.innerHTML = "There are", bSend = true) : (css(oMaxNum, "color", "#f60"), oCountTxt.innerHTML = "Exceeded", bSend = false)
            }
            //加载即调用
            confine();

            //广播按钮鼠标划过样式
            EventUtil.addHandler(oSendBtn, "mouseover", function () { this.className = "hover" });

            //广播按钮鼠标离开样式
            EventUtil.addHandler(oSendBtn, "mouseout", function () { this.className = "" });

            //输入框获取焦点时样式
            for (i = 0; i < aFtxt.length; i++) {
                EventUtil.addHandler(aFtxt[i], "focus", function () { this.className = "active" });
                EventUtil.addHandler(aFtxt[i], "blur", function () { this.className = "" })
            }

            //格式化时间, 如果为一位数时补0
            function format(str) {
                return str.toString().replace(/^(\d)$/, "0$1")
            }
        });
    </script>
}
